<template>
	<uni-popup ref="popup" type="bottom">
		<view class="popup-layout">
			<view class="title-row">
				<view>选择服务时间</view>
				<image :src="asserts.ic_close" @click="cancelClick"></image>
			</view>
			<view class="divider"></view>
			<view class="time-tips">{{title}}：</view>
			<picker-view indicator-class="indicator-class" :value="value" @change="bindChange" class="picker-view">
				<!-- <picker-view-column>
					<view :class="(year==item)?'item-select':'item'" v-for="(item,index) in years" :key="index">{{item}}年</view>
				</picker-view-column>
				<picker-view-column>
					<view :class="(month==item)?'item-select':'item'" v-for="(item,index) in months" :key="index">{{item}}月</view>
				</picker-view-column>
				<picker-view-column>
					<view :class="(day==item)?'item-select':'item'" v-for="(item,index) in days" :key="index">{{item}}日</view>
				</picker-view-column> -->
				<picker-view-column>
					<view :class="(selectTime==item)?'item-select':'item'" v-for="(item,index) in selectTimes" :key="index">{{getTimesItem(item, index)}}</view>
				</picker-view-column>
				<picker-view-column>
					<view :class="(hour==item)?'item-select':'item'" v-for="(item,index) in hours" :key="index">{{item}}</view>
				</picker-view-column>
				<picker-view-column>
					<view :class="(minute==item)?'item-select':'item'" v-for="(item,index) in minutes" :key="index">{{item}}</view>
				</picker-view-column>
			</picker-view>
			<view class="bottom-layout">
				<view class="item-reset" @click="resetClick">重置</view>
				<view class="item-confirm" @click="confirmClick">确定</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	import { getTimeMills } from '../../utils/utils'
	export default {
		computed: {
			getTimesItem(){
				return (times, index) => {
					let dayStr;
					if(index == 0){
						dayStr = '今天'
					}else if(index == 1){
						dayStr = '明天'
					}else if(index == 2){
						dayStr = '后天'
					}
					return `${dayStr}(${times.getMonth() + 1}月${times.getDate()}日)` 
				}
			}
		},
		data() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()
			for (let i = 1990; i <= date.getFullYear(); i++) {
				years.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			for (let i = 1; i <= 31; i++) {
				days.push(i)
			}
			const hours = []
			const selectTimes = [this.getTimeFuture(0), this.getTimeFuture(1), this.getTimeFuture(2)]
			const selectTime = selectTimes[0]
			const hour = date.getHours()
			for(let i = 0; i < 24; i++){
				hours.push(this.formatTimeStr(i))
			}
			const minutes = ['00']
			const minute = minutes[0]
			return {
				years,
				year,
				months,
				month,
				days,
				day,
				hours,
				hour,
				minutes,
				minute,
				selectTimes,
				selectTime,
				value: ['', hour, 0],
				title: '',
			}
		},
		methods: {
			//显示弹窗
			show(title) {
				this.title = title
				this.$refs.popup.open()
			},

			//绑定修改
			bindChange: function(e) {
				const val = e.detail.value
				// this.year = this.years[val[0]]
				// this.month = this.months[val[1]]
				// this.day = this.days[val[2]]
				this.selectTime = this.selectTimes[val[0]]
				this.hour = this.hours[val[1]]
				this.minute = this.minutes[val[2]]
			},
			
			//时间转化
			formatTimeStr(time){
				if(time < 10){
					return `0${time}`
				}else{
					return time
				}
			},
			
			getTimeFuture(futureDay){
				let newDate = new Date()
				newDate.setTime(newDate.getTime() + futureDay*24*60*60*1000)
				return newDate
			},

			//点击取消
			cancelClick() {
				this.$refs.popup.close()
			},
			
			//点击重置
			resetClick(){
				
			},

			//点击确定
			confirmClick() {
				let newYear = this.selectTime.getFullYear()
				let newMonth = this.selectTime.getMonth() + 1
				let newDate = this.selectTime.getDate()
				let dateStr = `${newYear}-${this.formatTimeStr(newMonth)}-${this.formatTimeStr(newDate)} ${this.hour}:${this.minute}`
				if(getTimeMills(dateStr) < (new Date().getTime())){
					uni.showToast({
						title: "不能选择现在之前的时间"
					})
					return
				}
				this.$emit('timeSelectBack', dateStr)
				this.cancelClick()
			}
		}
	}
</script>

<style scoped lang="less">
	.popup-layout {
		width: 100%;
		height: 800rpx;
		display: flex;
		flex-direction: column;
		background-color: white;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
	}

	.title-row {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 32rpx;
		color: #021624;
		position: relative;
		font-weight: 500;

		image {
			position: absolute;
			right: 66rpx;
			top: 26rpx;
			width: 48rpx;
			height: 48rpx;
		}
	}

	.divider {
		width: 100%;
		height: 2rpx;
		background-color: #EEEEEE;
	}

	.time-tips {
		font-size: 36rpx;
		line-height: 48rpx;
		color: #021624;
		margin: 32rpx 48rpx;
		font-weight: 500;
	}

	.picker-view {
		width: 750rpx;
		height: 600rpx;
		margin-top: 20rpx;
	}

	.item ,
	.item-select{
		line-height: 100rpx;
		text-align: center;
		color: #585F70;
		font-size: 28rpx;
		font-weight: normal;
	}
	.item-select{
		color: #01CBFF;
		font-size: 36rpx;
		font-weight: 500;
	}

	/deep/.indicator-class {
		height: 100rpx;
	}
	.bottom-layout{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 0 48rpx 48rpx 48rpx;
		.item-reset,
		.item-confirm{
			width: 280rpx;
			height: 96rpx;
			line-height: 96rpx;
			text-align: center;
			font-size: 32rpx;
			border-radius: 48rpx 48rpx 48rpx 48rpx;
		}
		.item-reset{
			background: #F9F9F9;
			border: 2rpx solid #EEEEEE;
			color: #585F70;
		}
		.item-confirm{
			background-color: #01CBFF;
			color: #FFFFFF;
		}
	}
</style>
